<template>
  <zero-dialog :showDialog.sync="dialog.open" :width="dialog.width" :title="dialog.title"
               :fullscreen.sync="dialog.fullscreen" :id="dialog.id"
               :submit="submitForm">
    <div slot="body">
      <vxe-form :ref="form.ref" :data="form.info" :rules="form.rules" title-align="right" title-width="100">
        <vxe-form-item title="名称" field="name" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.name" showWordCount clearable placeholder="请输入名称"/>
          </template>
        </vxe-form-item>

        <vxe-form-item title="权限标识符" field="perms" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-input max-length="50" v-model="data.perms" showWordCount clearable placeholder="请输入权限标识符"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="数据范围" field="dataScope" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.dataScope" placeholder="请选择数据范围" clearable>
              <vxe-option v-for="dict in dictType.data_scope" :key="dict.value" :label="dict.label"
                          :value="dict.value"></vxe-option>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="状态" field="status" span="24" :item-render="{}" reset-value="F">
          <template #default="{ data }">
            <vxe-radio-group v-model="data.status">
              <vxe-radio v-for="dict in dictType.enable_status" :key="dict.value" :label="dict.value">{{
                  dict.label
                }}
              </vxe-radio>
            </vxe-radio-group>
          </template>
        </vxe-form-item>
        <vxe-form-item title="备注" field="remarks" span="24" :item-render="{}">
          <template #default="{ data }">
            <vxe-textarea maxlength="255" v-model="data.remarks" showWordCount clearable placeholder="请输入备注"
                          rows="6"/>
          </template>
        </vxe-form-item>
      </vxe-form>
    </div>
  </zero-dialog>
</template>

<script>
import addUpdate from '@/mixins/add-update.js';

export default {
  name: 'addUpdateForm',
  mixins: [addUpdate],
  props: {
    dictType: {
      type: Object
    },
  },
  data() {
    return {
      addUrl: '/sysRole',
      updateUrl: '/sysRole',
      byIdUrl: '/sysRole',
      dialog: {
        width: '500px', //定义宽度
      },
      form: {//表单数据
        rules: {//表单校验
          name: [{required: true, message: "名称不能为空", trigger: "blur"}],
          perms: [{required: true, message: "权限标识符不能为空", trigger: "blur"}],
          dataScope: [{required: true, message: "数据范围不能为空", trigger: "blur"}],
          status: [{required: true, message: "状态不能为空", trigger: "blur"}]
        },
      },
    }
  }
}
</script>
